<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./style.css"></link>
</head>
<body>
  <audio id="bgm" src="./assets/bgm.mp3"></audio>
  <div class="music-btn off"></div>

  <!-- 动画 -->
   <div class="view">
    <!-- 太阳 -->
    <div class="sun"></div>

    <!-- 秋千 -->
    <div class="art">
      <div class="swing">

        <div class="leg1">
          <div class="jio"></div>
        </div>

        <div class="leg2">
          <div class="jio"></div>
        </div>

        <div class="neck"></div>

        <div class="head">
          <!-- 头发 -->
          <div class="part"></div>
        </div>

      </div>
    </div>
    <!-- 文字 -->
    <div class="text">

    </div>
   </div>

  <script>
    const musicBtn = document.querySelector('.music-btn')
    const bgMusic = document.getElementById('bgm')
    let isPlay = false

    musicBtn.addEventListener('click',() => {
      musicBtn.classList.toggle('off')

      isPlay = !isPlay
      if (isPlay) {
        bgMusic.play()
      } else {
        bgMusic.pause()
      }
    })
  </script>
</body>
</html>